<template>
  <div class="park-core-analysis">
    <div class="chart-section">
      <h3 class="chart-title">园区楼宇分布 (面积/㎡)</h3>
      <BarChart :chart-data="buildingData" :theme="theme" chart-type="stacked" />
    </div>
    <div class="chart-section">
      <h3 class="chart-title">近12个月招商趋势</h3>
      <LineChart :chart-data="investmentData" :theme="theme" />
    </div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';
import BarChart from './BarChart.vue';
import LineChart from './LineChart.vue';

defineProps({
  buildingData: {
    type: Array,
    required: true,
  },
  investmentData: {
    type: Object,
    required: true,
  },
  theme: {
    type: String,
    default: 'dark',
  }
});
</script>

<style scoped>
.park-core-analysis {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 20px;
  height: 100%;
}
.chart-section {
  display: flex;
  flex-direction: column;
}
.chart-title {
  color: #aed4ff;
  font-size: 16px;
  margin: 0 0 10px 0;
  text-align: center;
}
</style> 